<template>
  <div class='wy-main matching-tendering wei_tendering'>
    <div class="list_tab">
      <a-form :form="form" @submit="handleSubmit" class="wy-form">
          <a-form-item v-bind="formItemLayout" label="栏目">
            <a-select :disabled="disabled" style="width:280px" placeholder='请选择栏目类型' v-decorator="[ 'contentType', { rules: [ {required: true, message: '新闻类型不能为空！',}]}]" >
              <a-select-option key="1" :value="1">国际新闻</a-select-option>
              <a-select-option key="2" :value="2" >国内新闻</a-select-option>
              <a-select-option key="3" :value="3" >省内新闻</a-select-option>
              <a-select-option key="4" :value="4" >行业焦点</a-select-option>
            </a-select>
          </a-form-item>
        <a-form-item v-bind="formItemLayout" label="标题">
          <a-input :disabled="disabled" maxlength="50" v-decorator="[ 'contentTitle', { rules: [ {required: true, message: '标题不能为空！',}]}]" placeholder='请输入标题（50字以内）'   />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="公司名称">
          <a-input :disabled="disabled" maxlength="100" v-decorator="[ 'company', { rules: [ {required: true, message: '标题不能为空！',}]}]" placeholder='请输入公司名称（100字以内）'   />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="摘要">
          <a-textarea  :disabled="disabled"  maxlength="100" :autosize="{ minRows: 4, maxRows: 6 }" v-decorator="[ 'contentLabel', { rules: [ {required: true, message: '招标说明不能为空！',}]}]"   placeholder='请输入摘要（100字以内）'/>
        </a-form-item>
<!--         <a-form-item v-bind="formItemLayout" label="浏览权限">
        <a-radio-group @change="onChange" v-model="vipp">
          <a-radio :value="1">普通会员</a-radio>
          <a-radio :value="2">物流云会员</a-radio>
        </a-radio-group>
        </a-form-item> -->

        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="上传图片" class="upzjimg">
          <a-form-item class="up_img">
            <a-upload v-decorator="[ 'upload1',{rules: [{ required: true, message: '请上传图片!' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
              <div class="img_zz" v-if="Driver_img">
                <div class="img_zz_text" >
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
              <div class="up_img_d" v-if="!Driver_img">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>图片 
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="发布者">
          <a-input  disabled  v-model="admin1" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="排序">
          <a-input  disabled  v-model="admin1" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="跳转链接">
          <a-input  disabled  v-model="admin1" />
        </a-form-item>
        <a-divider class="title-divider" />
      <div class="ant-row ant-form-item" >
        <div class="ant-col-4 ant-form-item-label"></div>
        <div class="ant-col-20 ant-form-item-control-wrapper">
          <div class="ant-form-item-control">
            <div class="ant-title">
              <span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
            </div>
             <div class="ant-radio">
              <a-radio-group v-model="value">
                <!-- v-decorator="['mode']" -->
              <a-radio :value="107">
              通过
              </a-radio>
              <a-radio :value="108">
              拒绝
              </a-radio>
           </a-radio-group>
           </div>
           <div class="a-textarea">
             <a-textarea placeholder="审核意见" v-model="approvalRemarks" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
           </div>
          </div>
        </div>
        </div>
   
        <!-- <a-form-item v-bind="formItemLayout" label="排序">
          <a-input :disabled="disabled" v-decorator="[ 'contentOriginq']" placeholder='请输入数字为信息排序'   />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="跳转链接">
          <a-input :disabled="disabled" v-decorator="[ 'contentOrigintiao',{rules:[{required: true,message: '请输入跳转链接'}]}]" placeholder='请输入跳转链接'   />
        </a-form-item> -->
    
        <!-- <a-form-item v-bind="formItemLayout" label="内容">
         <a-input :disabled="disabled" type='hidden'  v-decorator="[ 'contentxxx', { rules: [ {required: true, message: '内容不能为空！',}]}]" placeholder='请输入内容（5000字以内）'   />
         <div  id="editorElem" style="text-align:left"></div>
        </a-form-item> -->
          <div class="ant-row ant-form-item" v-if="!detail||type!='add'">
            <div class="ant-col-4 ant-form-item-label"></div>
            <div class="ant-col-10 ant-form-item-control-wrapper">
              <div class="ant-form-item-control">
                <span class="ant-form-item-children">
                  
                  <a-button type="primary"  html-type="submit" style="width: 280px">
                    确认
                  </a-button>
                 <!-- <a-button style="margin-left: 10px;width:100px;" @click="reset">重置</a-button> -->
                  
                </span>
              </div>
            </div>
        </div>
      </a-form>
    </div>
   
  </div>
</template>
<script>
  // import E from 'wangeditor'
  import { environment } from '@/environments/environment'
  import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
  import {mapState, mapGetters,mapMutations} from 'vuex'
  //  const editor = new E('#editorElem')

  export default {
    // name: 'editor',
    props: ['type','detail',"isSee"],
    data() {
      return {
        uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
        FileUploadUrl2:environment.FileUploadUrl2,
        upload1:'',
        disabled:false,
        contentCode:1,
        value:107,
        approvalStatus:106,
        Driver_img:'',
        coverPic:'',
        coverPath:'',
        loading: false,
        disabled:false,
        vipp:1,
        approvalRemarks:'',
        admin1:'',
        fileList: [],
        contentTxt: '',
        // contentxxx:'',
        formItemLayout: {
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 4
            },
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 20
            },
          },
        },
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this);
    },
    created() {
        this.admin1 = this.$store.state.account.user.username;
        if(this.isSee){
          this.disabled = true
        }else{
          this.disabled = false
        }

        if(this.detail){
           console.log(this.detail)
          let d = this.detail
          if(d.coverPath){
             this.Driver_img = this.FileUploadUrl2+d.coverPath+d.coverPic
             this.upload1 = true
          }
          var tontext = d.contentTxt.replace(/<.*?>/g,"");
      
           setTimeout(() => {
          this.form.setFieldsValue({
            contentType:d.contentType,
            contentTitle:d.contentTitle,
            // contentLabel:d.contentLabel,
            contentOrigin:d.contentOrigin,
            upload1:this.upload1==true?true:false,
            // coverPath:d.coverPath,
            // coverPic:d.coverPic,
            // vipp:d.vipp,
            // contentxxx:tontext,


          })
          }, 100);
        }
    },
    components: {
    },
    watch: {
      //  contentTxt(val) {
      //   console.log(val.replace(/<.*?>/g,""))
      //   if(val.replace(/<.*?>/g,"")){
      //       setTimeout(() => {
      //         this.form.setFieldsValue({
      //         contentxxx:1
      //         });
      //       }, 100);

      //   }else{
      //     setTimeout(() => {
      //         this.form.setFieldsValue({
      //         contentxxx:''
      //         });
      //       }, 100);
      //   }
        
      // }
    },

    mounted: function() {
     
      //   editor.customConfig.onchange = (html) => {
      //     this.contentTxt = html
      //   }
      // //如果需要使用 base64 编码直接将图片插入到内容中，可参考一下示例配置
      //   editor.customConfig.uploadImgShowBase64 = true;
      //   // 将图片大小限制为 10M
      //    editor.customConfig.uploadImgMaxSize = 10* 1024 * 1024;
      //   editor.create()

      //   if(this.detail){
      //     var content = editor.txt.html(this.detail.contentTxt);
      //     editor.txt.html(content);
      //   }

    },
    computed:{
      ...mapState(['setUser'])
    },
    methods: {
      // 字典表接口 
      getCommonDict (nameList,type) {
        this.$get('/info/commonDict', {
          dictType: type,
                pageSize: 99,
                pageIndex: 1
        }).then((r) => {
          this[nameList] = r.data.data.rows;
        }).catch((e) => {
        })
      },
      // reset(){

        // this.form.resetFields();
      //   this.contentTxt='';
      //   this.Driver_img = '';
      //   this.coverPic='';
      //   this.coverPath='';
      //   var content = editor.txt.html(this.contentTxt);
      //   editor.txt.html(content);
      
      // },
      onChange(e){
        this.vipp = e.target.value;
      },
   
      // 附件
      handleChange(info) {
        this.fileList = info.fileList
        if(info.file.status === 'uploading') {
          return
        }
        let arr = []
        if(info.file.status === 'done') {
          this.loading = false
          // 每个货物的多个图片拼成字符串，按,分割
          let urls = [];
          for (var i=0;i<info.fileList.length;i++){
            arr.push({
              name: info.fileList[i].name,
              path: info.fileList[i].url?info.fileList[i].url:info.fileList[i].response.data.certifJpgFile
            })
          }
        }
        this.imgArray = arr;
      },
      Driver_Change(info){

        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Driver_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.coverPic = info.file.response.data.certificatesjpg// 驾驶员照片
          this.coverPath= info.file.response.data.certificatesPath// 驾驶员照片目录 
          this.loading = false
        }
      },
            // 上传证件
      beforeUpload(file) {

        const isJPG = file.type === 'image/jpeg' || 'image/png'
        if(!isJPG) {
          this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if(!isLt2M) {
          this.$message.error('Image must smaller than 2MB!')
        }
        return isJPG && isLt2M
      },
      //认证提交
      handleSubmit(e) {
        
        
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
         
          values.contentTxt = this.contentTxt
          values.coverPath = this.coverPath
          values.coverPic = this.coverPic
          // values.vipp = this.vipp
          values.contentCode = this.contentCode
           if(this.detail){
            values.contentId = this.detail.contentId
          }

          if(!err) {
              if(this.type =='edit'){
                values.approvalStatus = this.approvalStatus
                this.$put('content/content', values,true).then((r) => {
                if(r.status == 200){
                  this.$message.success(r.data.message);
                  // this.form.resetFields();
                  this.$emit('handleCancel');
                }else{
                  this.$message.error(r.data.message);
                }
                this.loading = false;
              }).catch((e) => {
                this.loading = false;
              })
              }else{
              this.$post('content/content', values,true).then((r) => {
                if(r.status == 200){
                  this.$message.success(r.data.message);
                  // this.form.resetFields();
                }else{
                  this.$message.error(r.data.message);
                }
                this.loading = false;
              }).catch((e) => {
                this.loading = false;
              })
              }

            }

        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .matching-tendering {
    .list_tab {
      margin-top: 10px;
    }
  }


</style>